<!DOCTYPE html>
<html lang="zh-cn" xmlns:v-bind="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
    <meta name="renderer" content="webkit">
    <title></title>
    <link rel="stylesheet" href="css/pintuer.css">
    <link rel="stylesheet" href="css/admin.css">
    <script src="js/jquery.js"></script>
    <script src="js/pintuer.js"></script>
    <script src="/js/vuejs-2.5.16.js"></script>
    <script src="/js/axios-0.18.0.js"></script>
</head>
<body>
<div class="panel admin-panel" id="questionDiv">
    <div class="panel-head" id="add"><strong><span class="icon-pencil-square-o"></span>编辑问卷</strong></div>
    <ul>
        <li><a class="button border-main icon-plus-square-o" :href="'/soul_question_add.html?questionnaireId='+questionnaireId"> 添加问题 </a></li>
        <!--<li><a class="button border-main icon-plus-square-o"
               id="addmodal" data-toggle="modal" data-target="#addModel"> 添加问题 </a></li>-->
    </ul>
    <div class="body-content">
        <table class="table table-hover text-center">
            <tr>
                <th>试题编号</th>
                <th>题目</th>
                <th>操作</th>
            </tr>

            <tr v-for="(question,index) in pageBeanVo.items">
                <td>{{index+1}}</td>
                <td>{{question.question}}</td>
                <td>
                    <a class="button border-main" :href="'/soul_question_update.html?questionId='+question.id"> 编辑 </a>
                    <a class="button border-main" href="javascript:void(0)" @click="deleteById(question.id)"> 删除 </a>
                </td>

            </tr>
            <tr>
                <td colspan="8">
                    <div class="pagelist">
                        <a href="javascript:void(0)" @click="pageNum=1" v-if="pageNum>1">首页</a>
                        <a href="javascript:void(0)" @click="pageNum--" v-if="pageNum>1">上一页</a>

                        <a href="javascript:void(0)" v-for="(page,index) in pageBeanVo.pages"
                           :class="pageNum==page ? 'current':''"
                           @click="pageNum=page"
                        >{{page}}</a>

                        <a href="javascript:void(0)" @click="pageNum++" v-if="pageNum<pageBeanVo.pages">下一页</a>
                        <a href="javascript:void(0)" @click="pageNum=pageBeanVo.pages" v-if="pageNum<pageBeanVo.pages">末页</a>
                    </div>
                </td>
            </tr>

        </table>

    </div>
</div>
<script type="text/javascript">
    const app = new Vue({
        el: '#questionDiv',
        data: {
            "pageNum": 1,
            "pageSize": 5,
            "pageBeanVo": [],
            "questionnaireId": ""
        },
        methods: {
            // 数据回显
            updateById(questionId){
                axios.get("/question/updateFindById?questionId="+questionId).then(resp => {

                })
            },
            // 查询所有与该id相关的灵魂题
            findById(questionnaireId) {
                axios.get("/question/findById", {
                    params: {
                        "questionnaireId": questionnaireId,
                        "pageNum": this.pageNum,
                        "pageSize": this.pageSize,
                    }
                }).then(resp => {
                    this.pageBeanVo = resp.data;
                    console.log(this.pageBeanVo);
                })
            },
            // 删除问题
            deleteById(id) {
                let b = confirm("您确定要删除该问题吗?");
                if (b) {
                    axios.get("/question/deleteById?id=" + id).then(resp => {
                        this.findById(this.questionnaireId);
                        alert("删除成功!");
                    })
                }
            },
        },
        watch: {
            pageNum() {
                this.findById(this.questionnaireId);
            }
        },
        created() {
            //获取地址栏中?id=xxx值
            this.questionnaireId = location.search.split("?")[1].split("=")[1];
            console.log(this.questionnaireId);
            if (this.questionnaireId) {
                this.findById(this.questionnaireId);

            }
        }
    })

</script>
<script src="/js/laydate/laydate.js"></script>
<script>
    lay('#version').html('-v' + laydate.v);
    //执行一个laydate实例
    laydate.render({
        elem: '#showTime' //指定元素
    });
</script>
</body>
</html>